<template>
  <el-drawer :title="!dataForm.id ? '新建报修工单' : '编辑'" :visible.sync="visible"
             :wrapperClosable="false" size="1200px" append-to-body
             class="JNPF-common-drawer"
  >
    <div class="JNPF-flex-main" style="margin-top: 10px;color: black">
      <div class="dynamicForm " style="margin-top: 50px">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
                <el-col :span="8">
                  <el-form-item label="报修时间"
                                prop="expectedVisitTime"
                  >
<!--                    <el-time-picker v-model="dataForm.repairTime"-->
<!--                                    placeholder="请选择" clearable :style='{"width":"100%"}' format="HH:mm:ss"-->
<!--                                    value-format="HH:mm:ss" :picker-options='{"selectableRange":"00:00:00-23:59:59"}'-->
<!--                    >-->

<!--                    </el-time-picker>-->

                         <el-date-picker
                                          v-model="dataForm.repairTime"
                                          type="datetime"
                                          placeholder="选择日期时间"
                                          align="right"
                                          :picker-options="pickerOptions">
                      </el-date-picker>

                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报修类型"
                                prop="repairType"
                  >
                    <el-select v-model="dataForm.repairType"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in repairTypeOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报修来源"
                                prop="repairSource"
                  >
                    <el-select v-model="dataForm.repairSource"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in repairSourceOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目"
                                prop="projectId"
                  >
                    <el-select v-model="dataForm.projectId"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in projectIdOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产"
                                prop="assetId"
                  >
                    <el-select v-model="dataForm.assetId"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in assetIdOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
            </el-col>
            <el-col :span="24" style="margin-top: 40px">
              <el-divider content-position="center">
              </el-divider>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="16">
                  <el-form-item label="报修地址"
                                prop="repairAddress"
                  >
                    <el-input v-model="dataForm.repairAddress"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="期望上门时间" label-width="150px"
                                prop="expectedVisitTime"
                  >
                    <el-date-picker
                      v-model="dataForm.expectedVisitTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      align="right"
                      :picker-options="pickerOptions">
                    </el-date-picker>
<!--                    <el-date-picker-->
<!--                      v-model="dataForm.expectedVisitTime"-->
<!--                      type="datetime"-->
<!--                      placeholder="选择日期时间"-->
<!--                      align="right"-->
<!--                      :picker-options="pickerOptions">-->
<!--                    </el-date-picker>-->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请方"
                                prop="applicantInfo"
                  >

                    <el-input v-model="dataForm.applicantInfo"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>

                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请人"
                                prop="applicantUser"
                  >

                    <el-input v-model="dataForm.applicantUser"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="电话"
                                prop="phone"
                  >
                    <el-input v-model="dataForm.phone"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="报修说明"
                                prop="repairRemark"
                  >
                    <el-input v-model="dataForm.repairRemark"
                              placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                              :autosize='{"minRows":4,"maxRows":4}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
        />
      </div>
      <div class="drawer-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import request from '@/utils/request'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: '',
      dataForm: {
        repairTime: '',
        repairType: '',
        repairSource: '',
        projectId: '',
        assetId: '',
        repairAddress: '',
        expectedVisitTime: '',
        applicantInfo: '',
        applicantUser: '',
        phone: '',
        repairRemark: ''
      },
      rules:
        {
          repairTime: [
            {
              required: true,
              message: '请至少选择一个',
              trigger: 'change'
            }
          ],
          repairType: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          repairSource: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          projectId: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          assetId: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          repairAddress: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          expectedVisitTime: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          applicantInfo: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          applicantUser: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          phone: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            }
          ],
          repairRemark: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]

        },
      repairTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      repairSourceOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      projectIdOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      assetIdOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }]

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    clearData() {
      this.dataForm.repairTime = ''
      this.dataForm.repairType = ''
      this.dataForm.repairSource = ''
      this.dataForm.projectId = ''
      this.dataForm.assetId = ''
      this.dataForm.repairAddress = ''
      this.dataForm.expectedVisitTime = ''
      this.dataForm.applicantInfo = ''
      this.dataForm.applicantUser = ''
      this.dataForm.phone = ''
      this.dataForm.repairRemark = ''
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/property/repair/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        } else {
          this.clearData()
        }
      })
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/property/repair',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/property/repair/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm))
      return _data
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    }
  }
}

</script>
<style>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 28px !important;
}


</style>
